import React, { Component } from 'react'
import { connect } from 'dva';

import { Form, Input, Row } from 'antd';

import { SearchComponentProps, BaseComponentProps, UmiComponentProps } from "@/common/type";

import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface P {
  isSelect?: boolean;
  fireRoomId?: string;
  handleSearch: Function;
}

type Props = P & SearchComponentProps & BaseComponentProps & UmiComponentProps;

const FormItem = Form.Item;

@connect()
class Search extends Component<Props, any> {

  search = e => {
    e.preventDefault();
    const data = this.props.form.getFieldsValue();
    this.props.handleSearch(data.name)
  };

  saveInputRef = input => (this.input = input);
  input: any;

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form>
        <SearchRow>
          <SearchCol key={0} span={12}>
            <FormItem
              label="建筑名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入名称" ref={this.saveInputRef}/>
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={12}>
            <Row type="flex" justify="end">
              <SearchButton onClick={() => {
                this.props.form.resetFields();
              }} icon="redo">重置</SearchButton>
              <SearchButton onClick={this.search} type="primary" icon="search" style={{ 'marginLeft': '15px' }}>搜索</SearchButton>
            </Row>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
